<template>
    <div class="editor" style="z-index: 0">
      <div ref="editorRef"></div>
    </div>
</template>
  
<script>
  import { onBeforeUnmount, ref, onMounted, watch } from "@vue/runtime-core";
  import WangEditor from "wangeditor";
  
  export default {
    name: "WangEditor",
    props: ["a_html"],
    emits: ["editorContent"],
    // model: {
    //   prop: "eContent",
    //   event: "change"
    // },
    // props: {
    //   eContent: { required: true }
    // },
  
    setup(props, { emit }) {
      const editorRef = ref();
      // console.log("a_html:" + props.a_html);
      // watch(
      //   () => props.a_html,
      //   (val, prevVal) => {
      //     console.log(`text is: ` + val);
      //   }
      // );
  
      // // 真正的编辑器里的内容
      let eContent = "";
      // 编辑器对象
      let editor;
  
      onMounted(() => {
        // 初始化
        editor = new WangEditor(editorRef.value);
        // watch(
        //   () => props.text,
        //   (val, prevVal) => {
        //     console.log(`text is: ` + val);
        //   }
        // );
  
        // 配置菜单栏，删减菜单，调整顺序
        editor.config.menus = [
          "bold",
          "head",
          "fontSzie",
          "fontName",
          "italic",
          "underline",
          "lineHeight",
          "indent",
          "link",
          "quote",
          "emoticon",
          "image",
          "code",
        ];
  
        // 设置编辑区域高度
        editor.config.height = 600;
        editor.config.zIndex = 0;
  
        // 当编辑器内容变化的时候通知父组件
        Object.assign(editor.config, {
          onchange(html) {
            eContent = html;
            // 通知父级控件方法
            emit("editorContent", html);
            // console.log(html);
          },
        });
  
        // 配置上传图片接口地址
        editor.config.uploadImgServer = "/api/post/uploadImg";
  
        editor.config.uploadImgMaxLength = 5; // 一次最多上传 5 张图片
  
        // 定义上传图片的默认名字
        editor.config.uploadFileName = "img";
  
        // 隐藏插入网络图片的功能
        editor.config.showLinkImg = false;
  
        // 回调函数
        editor.config.uploadImgHooks = {
          // 上传图片之前
          before: function (xhr) {
            console.log(xhr);
  
            // // 可阻止图片上传
            // return {
            //   prevent: true,
            //   msg: "图片上传已取消",
            // };
          },
          // 图片上传并返回了结果，图片插入已成功
          success: function (xhr) {
            console.log("success", xhr);
          },
          // 图片上传并返回了结果，但图片插入时出错了
          fail: function (xhr, editor, resData) {
            console.log("fail", resData);
          },
          // 上传图片出错，一般为 http 请求的错误
          error: function (xhr, editor, resData) {
            console.log("error", xhr, resData);
          },
          // 上传图片超时
          timeout: function (xhr) {
            console.log("timeout");
          },
          // 图片上传并返回了结果，想要自己把图片插入到编辑器中
          // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
          customInsert: function (insertImgFn, result) {
            // result 即服务端返回的接口
            console.log("customInsert", result);
  
            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            insertImgFn(result.data.data[0]);
          },
        };
  
        editor.create();
        //下面这行代码不知道干嘛用的，删了之后好多功能都能用了
        if(props.a_html){editor.txt.html(props.a_html);}
        
      });
  
      onBeforeUnmount(() => {
        editor.destroy();
        editor = null;
      });
  
      return {
        editorRef,
        eContent,
      };
    },
  };
  </script>
  